JavaScript is partly an object-oriented language.
To learn JavaScript, we got to learn the object-oriented parts of JavaScript.
In this article, we’ll look at the DOM.
DOM Access Shortcuts
Using childNodes, parentNode, nodeName, nodeValue, and attributes properties let us traverse the DOM.
However, they’re very inconvenient to use if we have any complex document.
Deeper nodes are hard to access and there’s no easy way to search for the items we want.
We have various shortcut methods that let us find the DOM element we want in an easier way.
The methods include getElementsByTagName(), getElementsByName(), getElementById() , querySelector() , and querySelectorAll() .
The getElementsByTagName method lets us get all the elements with a given tag name.
For instance, with the given HTML:
<body>
<p class="opener">foo</p>
<p><em>bar</em> </p>
<p id="closer">baz</p>
<!-- the end -->
</body>
We can write:
document.`getElementsByTagName('p');`
to returns a NodeList of p elements.
We can get the number of p elements with the length property:
document.`getElementsByTagName('p').length`
And we can get elements by index:
document.`getElementsByTagName('p')[0]`
We can get the HTML with innerHTML :
document.`getElementsByTagName('p')`[0].innerHTML;
and we get 'foo' .
getElementById lets us get an element by ID.
We can write:
document.getElementById('closer');
to get the element with ID closer .
getElementByClassName lets us get elements by class name.
querySelector lets us get an element with a given CSS selector.
And querySelectorAll lets us get all elements with the given CSS selector.
Siblings, Body, First, and Last Child
The nextSibling and previousSibling properties are 2 convenient properties to navigate the DOM tree if we have reference to one element.
So if we have:
const p = document.getElementById('closer');
We can write
console.log(p.previousSibling)
And get:
#text
And we can use it again by writing:
console.log(p.previousSibling.previousSibling)
and we get the p element above it.
We can mix previousSibling and nextSibling .
For instance, we can write:
p.previousSibling.nextSibling
A DOM node also has the firstChild and lastChild properties.
For instance, we can use:
document.body.firstChild;
to get the first child node of the body.
firstChild is the same as childNodes[0] .
lastChild gets the last child node of a node.
We can use:
document.body.lastChild;
to get the last child node of the body.
lastChild is the same as childNodes[childNodes.length — 1] .
Modifying DOM Nodes
We can modify DOM nodes by assigning a value to the innerHTML property/
For instance, we can write:
const p = document.getElementById('closer');
p.innerHTML = 'closer';
We can also set the HTML string as the value of innerHTML :
const p = document.getElementById('closer');
p.innerHTML = '<em>closer</em> closer';
We can also change the content of a node by assigning a value to the nodeValue property:
const p = document.getElementById('closer');
p.nodeValue = 'closer';
Conclusion
We can get DOM nodes with various shortcut methods.
Also, we can set the content with various properties.
